<template>
  <div class="parent">
    <echartsDom v-if="isShowEcharts" style="width: 100%; height: 100%" :width="width" :height="height" :option="option" :type="type" />
    <div v-else>
      <px-empty :image-size="200" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, toRefs, ref, watch } from "vue";
import echartsDom from "./echartsDom.vue";
const props = defineProps({
  width: {
    type: String,
    default: ""
  },
  height: {
    type: String,
    default: ""
  },
  chartsTitle: {
    type: String,
    default: ""
  },
  startTime: {
    type: String,
    default: ""
  },
  endTime: {
    type: String,
    default: ""
  },
  color: {
    type: String,
    default: "#3B82F6"
  },
  type: {
    type: String,
    default: ""
  },
  chartlist: {
    type: Object,
    required: true
  },
  spcChartsList: {
    type: Object,
    required: true
  },
  forecast: {
    type: Boolean,
    default: false
  },
  forecastlist: {
    type: Object,
    required: true
  },
  pointspcList: {
    type: Object,
    required: true
  }
});

const isShowEcharts = ref(false);
const state = reactive({
  option: {},
  series: [],
  yAxis: []
});
const { option, series, yAxis } = toRefs(state);

const getoptions = () => {
  series.value = [];
  yAxis.value = [];
  if (props.chartlist.yaxis != null) {
    isShowEcharts.value = true;
    if (props.chartlist.yaxis != null) {
      series.value = props.chartlist.yaxis.map(item => {
        return {
          name: item.name,
          yAxisIndex: 0,
          type: "line",
          data: item.value
          // label: {
          //   show: true,
          //   position: "top"
          // }
        };
      });
      yAxis.value.push({
        name: "消耗量（t）",
        type: "value"
      });
    }
  } else {
    isShowEcharts.value = false;
  }
  console.log(series.value);
  option.value = {
    toolbox: {
      show: true,
      feature: {
        saveAsImage: {
          title: "点击保存为图片",
          name: `${props.chartsTitle}(${props.startTime}${props.endTime})`
        }
      }
    },
    grid: {
      left: "40px",
      top: "60px",
      right: "50px",
      bottom: "20px",
      containLabel: true
    },
    legend: {
      top: "20px",
      left: "180px",
      type: "scroll",
      width: "60%"
    },
    tooltip: {
      confine: true,
      trigger: "axis"
    },
    xAxis: {
      type: "category",
      boundarGap: false,
      data: props.chartlist.xaxis
    },
    yAxis: yAxis.value,
    series: series.value
  };
};
watch(
  () => props.chartlist,
  newOption => {
    getoptions();
  },
  { immediate: true }
);
watch(
  () => props.forecastlist,
  newOption => {
    getoptions();
  },
  { immediate: true }
);
watch(
  () => props.forecast,
  newOption => {
    getoptions();
  },
  { immediate: true }
);
watch(
  () => props.pointspcList,
  newOption => {
    console.log(newOption);
    getoptions();
  },
  { immediate: true }
);
</script>

<style scoped lang="scss">
.parent {
  position: relative;
  float: left;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.topIcon {
  position: absolute;
  top: 7px;
  right: 8px;
  width: 20px;
  cursor: pointer;
}

.linediv {
  position: relative;
  float: left;
  width: 23px;
  height: 17px;
  margin-right: 10px;

  .line {
    position: absolute;
    top: 8px;
    width: 100%;
    height: 1px;
    background: #3b82f6;
  }

  .yuan {
    position: absolute;
    top: 6px;
    left: 9px;
    width: 5px;
    height: 5px;
    background: #3b82f6;
    border-radius: 50%;
  }
}
</style>
